<template>
  <div>
    <my-form v-bind="formConfig" v-model="formData">
      <template #footer>
        <div class="btns">
          <el-button type="primary" @click="searchData">查询</el-button>
          <el-button @click="resetData">重置</el-button>
        </div>
      </template>
    </my-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, PropType } from 'vue'
import MyForm from '@/components/form/form.vue'
import type { IFormConfig } from '@/components/form/type'
import eventBus from '@/utils/eventBus'
export default defineComponent({
  props: {
    formConfig: {
      type: Object as PropType<IFormConfig>,
      required: true
    }
  },
  components: {
    MyForm
  },
  setup(props) {
    const formItems = props.formConfig?.formItems ?? []
    const formOriginData: any = {}
    for (const item of formItems) {
      formOriginData[item.prop] = ''
    }
    const formData = ref(formOriginData)

    const searchData = () => {
      eventBus.emit('fetchData', { ...formData.value })
    }
    const resetData = () => {
      formData.value = formOriginData
      // for (const key in formOriginData) {
      //   formData.value[`${key}`] = formOriginData[key]
      // }
      eventBus.emit('fetchData', {})
    }
    return {
      formData,
      searchData,
      resetData
    }
  }
})
</script>

<style scoped>
.btns {
  padding: 0 30px 10px 0;
  text-align: right;
}
</style>
